<template>
    <main-wrap :bodyStyle="{height:'100%',overflow: 'hidden'}">
        <div class="detailBox">
            <div class="dtmainbg">
                <div class="dt-main">
                    <div class="detail-img-box">
                        <div class="imgBg">
                            <video-box v-if="detail.videoFileUrls && detail.videoFileUrls.length>0"/>
                            <audio-box v-else-if="detail.musicFileUrls && detail.musicFileUrls.length>0"/>
                            <img-box v-else-if="detail.headImageUrls && detail.headImageUrls.length>0" :imgs='detail.headImageUrls'/>
                        </div>
                    </div>
                    <div class="content">
                        <div class="rightCon">
                            <div class="title">{{detail.title}}</div>
                            <div class="introduce">{{detail.subtitle}}</div>
                            <div class="prie">
                                <s v-if="detail.marketPrice">
                                    <template v-if="detail.currency=='USD'">$</template>
                                    <template v-else-if="detail.currency=='CNY'">¥</template>
                                    {{detail.marketPrice.decimalTwoString}}
                                </s>
                                <div class="xj wrapfix" v-if="detail.internalEthPrice">
                                    <img src="/images/priceIcon.png" alt=""/>
                                    <em>{{detail.internalEthPrice.decimalTwoString}}</em>
                                    (${{detail.internalPrice.decimalTwoString}})
                                    <!-- /USDT {{detail.internalPrice.decimalTwoString}} -->
                                </div>
                                <div class="num">
                                    <stepper v-model="orderInfo.quantity" :min='1' :readonly="true"/>
                                </div>
                            </div>
                            <auth-item/>
                            <div class="specParamslogistics">
                                <spec-params v-if="detail.goodsId" :amount2='amount2' @changeCoupon="changeCoupon" />
                            </div>
                            <div class="gdtconTab">
                                <one-tab v-model="active" :styleType="2" :lists="listTab"/>
                            </div>
                            <div class="tabContent">
                                <Detail v-if="active==1"/>
                                <Params v-else-if="active==2"/>
                                <return-goods v-else-if="active==3"/>
                            </div>
                        </div>
                        
                         <buy-order-btn v-if="detail.internalPrice" :type="1" :couponId="couponId" :amount1='amount1' :amount2='amount2'/> 
                    </div>
                </div>
            </div>
        </div>
    </main-wrap>
</template>

<script>
import {reactive,toRefs, onMounted,computed } from 'vue'
import { useStore } from 'vuex'
import {useRoute,useRouter} from 'vue-router'
import mainWrap from '@/components/mainWrap.vue'
import {toast} from '@/utils/common.js'
import back from "@/components/back.vue";
import sort from '@/components/sort.vue';
import mySearch from '@/components/mySearch.vue'
import Image from '@/components/image.vue';
import imgBox from '@/components/imgBox.vue'
import stepper from '@/components/stepper.vue'
import buyOrderBtn from '@/components/buyOrderBtn.vue'
import authItem from './components/authItem.vue';
import specParams from './components/specParams.vue'
import oneTab from '@/components/oneTab.vue';
import Detail from './components/detail.vue'
import Params from './components/params.vue'
import returnGoods from './components/returnGoods.vue'
import audioBox from "@/components/audioBox.vue";
import videoBox from '@/components/videoBox.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
        mainWrap,
        back,
        sort,
        mySearch,
        Image,
        imgBox,
        stepper,
        buyOrderBtn,
        authItem,
        specParams,
        oneTab,
        Detail,
        Params,
        returnGoods,
        videoBox,
        audioBox
    },
    setup(){
        const store = useStore()
        const router = useRouter()
        const route = useRoute()
        const {t} = useI18n()

        const state = reactive({
            active:1,
            id:'', // 商品ID
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            amount1:0,
            amount2:0,
            couponId:null,
            listTab:[{id:1,name:t('goods.tab1')},{id:2,name:t('goods.tab2')},{id:3,name:t('goods.tab3')}]
        })
        state.amount1 = computed(()=>{
            if(!state.detail.goodsId) return
            const price = state.detail.internalEthPrice ? state.detail.internalEthPrice.num : 0
            let total = price * state.orderInfo.quantity // 单价*数量
            return total>0?total:0
        })
        state.amount2 = computed(()=>{
            if(!state.detail.goodsId) return
            const price = state.detail.internalPrice.num
            let total = price * state.orderInfo.quantity // 单价*数量
            return total>0?total:0
        })

        onMounted( async()=>{
          state.id = route.params.id
          store.commit('shop/set_orderInfo',{goodsId:state.id})
          await store.dispatch('shop/get_goods_detail',{
            goodsId:state.id
          })
        })
       const changeCoupon = (item)=>{
          state.couponId = item.shopCouponId
        }
        return {
            ...toRefs(state),
            changeCoupon
        }
    }
}
</script>

<style lang="scss" scoped>
   
    .detailBox{
        display: flex;
        height: 100%;
        width: 100%;
        overflow: hidden;
        padding: 30px 30px 30px 0;
        .dtmainbg{
            height: 100%;
            width: 100%;
            background: url(/images/detail/dt1.png) left top no-repeat;
            background-size: 100% 100%;
            overflow: hidden;
            padding: 30px 0 0 30px;
            .dt-main{
                display: flex;
                height: 100%;
                width: 100%;
                overflow: hidden;
                overflow-x: auto;
                .detail-img-box{
                    display: flex;
                    height: 100%;
                    width: 700px;
                    max-width: 35%;
                    flex-shrink: 0;
                    padding: 20px;
                    .imgBg{
                        width: 100%;
                        height: 100%;
                        max-height: 540px;
                        overflow: hidden;
                        padding: 30px;
                        background:linear-gradient(45deg,transparent 20px, rgba(0,0,0,0.5) 0) bottom left,
                        linear-gradient(-135deg,transparent 20px, rgba(0,0,0,0.5) 0) top right;
                        background-size: 50% 100% !important;
                        background-repeat: no-repeat !important;
                    }
                }
                .content{
                    display: flex;
                    flex-flow: column;
                    flex: 1;
                    height: 100%;
                    overflow: hidden;
                    min-width: 800px;
                    max-width:65%;
                    padding: 12px 0 0 0;
                    font-family: Poppins-Medium, Poppins;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: normal;
                    font-size: 24px;
                    .rightCon{
                        flex: 1;
                        padding: 0 30px 30px 0;
                        overflow: hidden;
                        overflow-y: auto;
                    }
                    .title{
                        font-size: 30px;
                        font-family: Poppins-Medium, Poppins;
                        font-weight: 500;
                        color: #FFFFFF;
                        line-height: 40px;
                    }
                    .introduce{
                        font-family: Poppins-Medium, Poppins;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 24px;
                        line-height: 38px;
                        padding: 20px 0 10px 0;
                    }
                    .prie{
                        display: flex;
                        //align-items: center;
                        height: 80px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 30px;
                        width: 100%;
                        overflow: hidden;
                        margin: 0 0 15px 0;
                        s{
                            line-height: 80px;
                            margin: 0 30px 0 0;
                            flex-shrink: 0;
                        }
                        .xj{
                            line-height: 80px;
                            flex: 1;
                            flex-shrink: 0;
                            em{
                                color: #BFF9FF;
                                font-style: normal;
                            }
                            img{
                                display: block;
                                float: left;
                                width: 20px;
                                margin: 23px 10px 0 0;
                            }
                        }
                        .num{
                            padding: 8px 0 0 0;
                            width: 250px;
                        }
                    }
                    .specParamslogistics{
                        margin: 20px 0 20px 0;
                        padding: 20px 0 20px 0;
                        border-top: 3px dashed #536B98;
                        //border-bottom: 3px dashed #536B98;
                    }
                    .gdtconTab{
                        padding: 0;
                    }
                    .tabContent{
                        background: rgba(26,117,251,0.5000);
                        padding:30px;
                        border-top-right-radius: 20px;
                        border-bottom-left-radius: 20px;
                        box-shadow:inset 0 0 10px #689ff2;
                    }
                }
            }
            
        }
    }
 
</style>